<template>
  <demoBlock title="样式定制" padding class="demo-circle">
    <vcu-circle
      v-model:current-rate="currentRate3"
      :rate="rate"
      :speed="100"
      :stroke-width="60"
      text="宽度定制"
    />

    <vcu-circle
      v-model:current-rate="currentRate3"
      color="#ee0a24"
      :rate="rate"
      layer-color="#ebedf0"
      :speed="100"
      text="颜色定制"
    />

    <vcu-circle
      v-model:current-rate="currentRate2"
      :rate="rate"
      :speed="100"
      :color="gradientColor"
      text="渐变色"
    />

    <vcu-circle
      v-model:current-rate="currentRate4"
      color="#07c160"
      :rate="rate"
      :speed="100"
      :clockwise="false"
      text="逆时针"
      style="margin-top: 15px"
    />

    <vcu-circle
      v-model:current-rate="currentRate4"
      color="#7232dd"
      :rate="rate"
      :speed="100"
      size="120px"
      :clockwise="false"
      text="大小定制"
      style="margin-top: 15px"
    />

    <div class="mt-10">
      <vcu-button text="增加" type="primary" size="small" @click="add" class="mr-10" />
      <vcu-button text="减少" type="danger" size="small" @click="reduce" />
    </div>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const rate = ref(70);
    const currentRate2 = ref(70);
    const currentRate3 = ref(70);
    const currentRate4 = ref(70);
    const gradientColor = {
      "0%": "#3fecff",
      "100%": "#6149f6",
    };
    const format = (rate) => Math.min(Math.max(rate, 0), 100);

    const add = () => {
      rate.value = format(rate.value + 20);
    };

    const reduce = () => {
      rate.value = format(rate.value - 20);
    };

    return {
      rate,
      currentRate2,
      currentRate3,
      currentRate4,
      gradientColor,
      add,
      reduce,
    };
  },
});
</script>
<style lang="less" scoped>
.demo-circle {
  .vcu-circle {
    margin: 5px;
  }
}
</style>
